<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.16/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/signin/">
    <title>登录页面</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.16/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top:100px;width: 400px">
    <form class="form-signin" action="/login" method="post">
        <p style="color:red" th:text="${error}">这是错误信息</p>
        <h2 class="form-signin-heading" style="text-align: center">登录宠物管理系统</h2>
        <label for="username" class="sr-only">用户名</label>
        <input type="text" id="username" name="username" class="form-control" placeholder="用户名" required autofocus>
        <label for="password" class="sr-only">密码</label>
        <input type="password" id="password" name="password" class="form-control" placeholder="密码" required>
        <label for="code" class="sr-only">验证码</label>
        <input type="text" id="code" name="code" class="form-control" placeholder="验证码" required>
        <img src="code.do" id="img" onclick="changeCode()">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="auto_login"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    </form>
</div> <!-- /container -->
<script>
    function changeCode(){
        document.getElementById("img").src = "code.do?x=" + Math.random();
    }
</script>
</body>
</html>